<template>
	<div class="container">
		<!-- 个人头部信息 -->
		<div class="user-profile">
			<!-- 背景色 -->
			<div class="headback"></div>
			<!-- 用户显示模块 -->
			<div class="user-info">
				<!-- 头像 -->
				<div class="avatar">
					<img :src="user.avatar" alt="" />
				</div>
				<div>
					<!-- 用户名 -->
					<div class="username" @click="isLogin ? '' : goToLogin()">
						{{ user.username }}
					</div>
					<!-- 用户邮箱 -->
					<div class="email">
						{{ user.email }}
					</div>
				</div>
			</div>
		</div>
		<!-- 功能入口 -->
		<div class="function-entries">
			<div v-for="(entry, index) in functionEntries" :key="index" @click="handleFunctionClick(entry.action)"
				class="function-entry">
				<i :class="entry.icon"></i>
				<span>{{ entry.label }}</span>
			</div>
		</div>
		<!-- 功能列表 -->
		<div class="function-list">
			<div v-for="(item, index) in functionItems" :key="index" @click="handleFunctionItemClick(item.action)"
				class="function-item">
				<div class="item-icon">
					<i :class="item.icon"></i>
				</div>
				<div class="item-content">
					<div class="item-title">{{ item.title }}</div>
					<div class="item-desc">{{ item.desc }}</div>
				</div>
				<div class="item-arrow">
					<i class="fa fa-angle-right"></i>
				</div>
			</div>
		</div>
		<div class="logout-item" @click="logout">
			<div class="item-icon">
				<i class="fa fa-sign-out"></i>
			</div>
			<div class="item-content">
				<div class="item-title">退出登录</div>
			</div>
		</div>
	</div>
</template>

<script>
	import avatar from '@/assets/images/avatar.png';
	import {
		getUserInfo
	} from '@/apis/user';
	export default {
		data() {
			return {
				isLogin: false, // 新增登录状态
				user: {
					username: '请登录',
					email: '',
					avatar: avatar
				},
				functionEntries: [{
						icon: 'fa fa-calendar-check-o',
						label: '我的预约',
						action: 'goToReservation'
					},
					{
						icon: 'fa fa-heart',
						label: '我的收藏',
						action: 'goToFavorites'
					},
					{
						icon: 'fa fa-shopping-cart',
						label: '我的商城',
						action: 'goToMall'
					},
					{
						icon: 'fa fa-credit-card-alt',
						label: '我的卡包',
						action: 'goToCardPackage'
					}
				],
				functionItems: [{
						icon: 'fa fa-cog',
						title: '设置',
						desc: '个人信息与偏好设置',
						action: 'goToSetting'
					},
					{
						icon: 'fa fa-headphones',
						title: '联系客服',
						desc: '获取帮助与支持',
						action: 'goToContact'
					},
					{
						icon: 'fa fa-info-circle',
						title: '关于我们',
						desc: '了解更多关于我们的信息',
						action: 'goToAbout'
					}
				]
			};
		},
		methods: {
			getInfo() {
				// 从本地存储获取token
				const token = localStorage.getItem('token');
				if (token) {
					this.isLogin = true;
					getUserInfo(token)
						.then(res => {
							console.log('获取用户信息成功', res.data);
							// 处理获取到的用户信息
							if (res.data) {
								this.user = res.data;
							}
						})
						.catch(error => {
							console.error('获取用户信息失败:', error);
							// 处理错误情况
							if (error.response) {
								// 请求已发出，服务器返回状态码非2xx
								console.error('服务器错误:', error.response.status);
							} else if (error.request) {
								// 请求已发出，但无响应
								console.error('无响应:', error.request);
							} else {
								// 其他错误
								console.error('请求错误:', error.message);
							}
						});
				}
			},
			handleFunctionClick(action) {
				this[action]();
			},
			handleFunctionItemClick(action) {
				this[action]();
			},
			goToLogin() {
				this.$router.push('/login');
			},
			goToSetting() {
				// 处理设置跳转逻辑
			},
			goToContact() {
				// 处理联系客服跳转逻辑
			},
			goToAbout() {
				// 处理关于我们跳转逻辑
			},
			logout() {
				// 处理退出登录逻辑
				localStorage.removeItem('token'); // 删除本地的token
				this.isLogin = false;
				this.user = {
					username: '请登录',
					email: '',
					avatar: avatar
				};
				this.$router.push('/login'); // 退出后跳转到登录页面
			},
			// 新增方法，处理功能入口的点击事件
			goToReservation() {
				// 我的预约跳转逻辑
			},
			goToFavorites() {
				// 我的收藏跳转逻辑
			},
			goToMall() {
				this.$router.push('/shop');
			},
			goToCardPackage() {
				// 我的卡包跳转逻辑
			}
		},
		mounted() {
			this.getInfo();
		}
	};
</script>

<style scoped>
	.container {
		padding: 0;
		margin: 0;
		background-color: #f5f7fa;
		height: 100%;
		overflow: hidden;
	}

	/* 个人头部信息 */
	.user-profile {
		position: relative;
		height: 180px;
		/* 减少头部高度 */
		overflow: hidden;
		margin-bottom: 10px;
		/* 减少底部边距 */
		background: linear-gradient(135deg, #8b0000 0%, #b31b1b 100%);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 调整阴影 */
	}

	.headback {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: skewY(-5deg);
		background-color: rgba(255, 255, 255, 0.1);
	}

	.user-info {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30px;
		/* 减少顶部内边距 */
	}

	.avatar {
		width: 80px;
		/* 减小头像宽度 */
		height: 80px;
		/* 减小头像高度 */
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
		/* 调整头像阴影 */
	}

	.avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.username {
		font-size: 24px;
		/* 减小用户名大小 */
		font-weight: 600;
		color: white;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-top: 8px;
		/* 减少顶部边距 */
	}

	.email {
		font-size: 18px;
		/* 减小邮箱文字大小 */
		color: rgba(255, 255, 255, 0.8);
		margin-top: 4px;
		/* 减少顶部边距 */
	}

	/* 功能入口 */
	/* 功能入口 */
	.function-entries {
		display: flex;
		flex-wrap: nowrap;
		/* 禁止换行 */
		background-color: white;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}

	.function-entry {
		flex: 1;
		/* 平均分配剩余空间 */
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12px 0;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.function-entry i {
		font-size: 30px;
		color: #8b0000;
		margin-bottom: 8px;
	}

	.function-entry span {
		font-size: 18px;
		color: #333;
		text-align: center;
	}

	.function-entry:hover {
		transform: translateY(-3px);
		background-color: rgba(139, 0, 0, 0.03);
	}

	/* 功能列表 */
	.function-list {
		background-color: white;
		border-radius: 8px;
		/* 减小圆角 */
		padding: 15px;
		/* 减少内边距 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		/* 调整阴影 */
	}

	.function-item {
		display: flex;
		align-items: center;
		padding: 15px 0;
		/* 减少内边距 */
		border-bottom: 1px solid #f0f0f0;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.function-item:last-child {
		border-bottom: none;
	}

	.item-icon {
		width: 40px;
		/* 减小图标容器宽度 */
		height: 40px;
		/* 减小图标容器高度 */
		border-radius: 8px;
		/* 减小圆角 */
		background-color: rgba(139, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;
		/* 减少右边距 */
	}

	.item-icon i {
		font-size: 24px;
		/* 减小图标大小 */
		color: #8b0000;
	}

	.item-content {
		flex: 1;
	}

	.item-title {
		font-size: 20px;
		/* 减小标题文字大小 */
		font-weight: 500;
		color: #333;
		margin-bottom: 4px;
		/* 减少底部边距 */
	}

	.item-desc {
		font-size: 16px;
		/* 减小描述文字大小 */
		color: #999;
	}

	.item-arrow {
		width: 30px;
		/* 减小箭头容器宽度 */
		height: 30px;
		/* 减小箭头容器高度 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item-arrow i {
		font-size: 24px;
		/* 减小箭头图标大小 */
		color: #ccc;
	}

	/* 退出登录 */
	.logout-item {
		display: flex;
		align-items: center;
		padding: 15px;
		/* 减少内边距 */
		background-color: white;
		border-radius: 8px;
		/* 减小圆角 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		/* 调整阴影 */
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.item-icon {
		width: 40px;
		/* 减小图标容器宽度 */
		height: 40px;
		/* 减小图标容器高度 */
		border-radius: 8px;
		/* 减小圆角 */
		background-color: rgba(139, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;
		/* 减少右边距 */
	}

	.item-icon i {
		font-size: 24px;
		/* 减小图标大小 */
		color: #8b0000;
	}

	.item-content {
		flex: 1;
	}

	.item-title {
		font-size: 20px;
		/* 减小标题文字大小 */
		font-weight: 500;
		color: #8b0000;
	}

	.logout-item:hover {
		transform: translateY(-3px);
		/* 调整悬停效果 */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
</style>